<template>
  <div class="navconH5">
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      text-color="#ffffff"
      active-text-color="#ffffff"
      :ellipsis="false"
    >
      <div
        class="site-title-icon leftIcon"
        v-if="props.leftShow"
        @click="getpage"
      >
        <el-icon class="" v-if="!home"><ArrowLeftBold /></el-icon>
        <el-icon v-if="home"><House /></el-icon>
      </div>

      <!-- 添加插槽 -->
      <div v-if="!solits" class="site-title">
        <!-- 默认内容 -->
        <span class="site-title" v-if="props.texts">{{
          props.texts || ""
        }}</span>
        <span class="site-title" v-else>{{ topobjs.title || "执行助手" }}</span>
      </div>
      <div v-if="solits" class="site-title">
        <slot name="title"> </slot>
      </div>
    </el-menu>
    <el-drawer
      class="h5el-menu-demo"
      v-model="drawer"
      :title="'您好 ' + user.username"
      direction="ttb"
      show-close
      lock-scroll
      append-to-body
      size="70%"
    >
      <leftnav :h5="true"></leftnav>
      <div>
        <el-button
          class="mores"
          style="width: 100%; margin-top: 10px"
          @click="jumpto"
          >修改密码</el-button
        >
        <el-button
          class="mores"
          type="danger"
          style="width: 100%; margin-top: 10px; margin-left: 0"
          @click="exit"
          >退出登录</el-button
        >
      </div>
      <Mima ref="Mimaref"></Mima>
    </el-drawer>
  </div>
</template>
  
  <script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import Mima from "./mima.vue";

import {
  ref,
  onMounted,
  onBeforeUnmount,
  getCurrentInstance,
  watch,
  defineProps,
} from "vue";
import { useMutitabsStore } from "@/store/mutitabs";
import { useSiteThemeStore } from "@/store/siteTheme";
import { useRouter, useRoute } from "vue-router";
import leftnav from "@/components/leftnav.vue";
import { setStorage, getStorage } from "@/utils/util";

const route = useRoute(); // 使用 useRoute 获取当前路由信息
const router = useRouter(); //获取当前路由
let bus = getCurrentInstance().appContext.config.globalProperties.$Bus; // 声明$Bus
const mutitabsStore = useMutitabsStore();
const siteThemeStore = useSiteThemeStore();
const props = defineProps({
  // props 定义
  texts: String,
  leftShow: {
    type: Boolean,
    default: false,
    required: false,
  },
  home: {
    type: Boolean,
    default: false,
    required: false,
  },
  // 是否有插槽
  solits: {
    type: Boolean,
    default: false,
    required: false,
  },
});

let is_home = ref(true);
let user = ref({});
let drawer = ref(false); // 侧边栏展示
let mobileWidth = ref(992);
let allmenu = ref([]);
let topobjs = ref({});
//动态加载菜单
allmenu.value = JSON.parse(getStorage("allmenu"));
function drawerClick() {
  drawer.value = !drawer.value;
}
function rotnamesObjs() {
  // let
  // let objs =
  drawer.value = false; // 隐藏侧边栏
  // 检查 multitabsStore.tabsPage 是否为字符串，并转换为数组对象
  // if (typeof mutitabsStore.tabsPage === "string") {
  //    mutitabsStore.tabsPage = JSON.parse(mutitabsStore.tabsPage);
  // }
  let tabsPage =
    typeof mutitabsStore.tabsPage === "string"
      ? JSON.parse(mutitabsStore.tabsPage)
      : mutitabsStore.tabsPage;
  let objs = tabsPage.find((item) => item.name == route.name) || {};
  topobjs.value = objs;
  if (topobjs?.value.title && topobjs.value.name == "indexs") {
    topobjs.value.title = "执行助手";
    is_home.value = true; //首页不显示返回
    return;
  }
  console.log(topobjs, "------------topobjs");
  is_home.value = false; //首页不显示返回
  if (!topobjs.value.name) {
    if (route.name == "h5_school_details") {
      topobjs.value.title = "学校详情";
      topobjs.value.name = route.name;

      // topobjs.value.url
    }
    if (route.name == "h5_online_details") {
      topobjs.value.title = "督课详情";
      topobjs.value.name = route.name;
    }
  }
}
const Mimaref = ref(null);

//路由跳转
function jumpto() {
  console.log(Mimaref.value, "-------Mima");
  Mimaref.value.addModuleFn();
}
rotnamesObjs();
function getpage() {
  // drawer.value = false;
  if (!props.home) router.go(-1);
  if (props.home) {
    router.replace({ path: "/indexs" });
  }

  // router.replace({ path: mutitabsStore.previousPath }); // 返回上一页路径
}
onMounted(async () => {
  // console.log(props,'-------props')

  user.value = await JSON.parse(mutitabsStore.userinfo);
  window.addEventListener("resize", handleResize);
  handleResize();
  console.log("-------测试111111111111");
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);
});

function handleResize() {
  isMobile();
}

// 退出登录
function exit(e) {
  ElMessageBox.confirm("退出登录, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      mutitabsStore.logout("false");
      sessionStorage.clear();
      localStorage.clear();
      siteThemeStore.$reset();
      ElMessage.success("已退出登录!");
      // window.location.pathname = '/login'
      router.replace({ path: "/login" }).then(() => {
        window.location.reload();
      });
    })
    .catch(() => {});
}
function isMobile() {
  let htmlWidth =
    document.documentElement.clientWidth || document.body.clientWidth;
  return htmlWidth <= mobileWidth.value;
}

// 监听路由变化
// watch(
//   () => route.path,
//   (newPath, oldPath) => {
//     console.log("路由变化:", oldPath, "->", newPath);
//     // 在这里可以添加其他逻辑来处理路由变化
//     drawer.value = false;

//   }
// );
// 监听路由变化
watch(
  route,
  (newRoute, oldRoute) => {
    // console.log("路由变化:", oldRoute.name, "->", newRoute.name);
    console.log("当前路由对象:", newRoute);

    console.log(mutitabsStore.tabsPage, "----mutitabsStore");
    rotnamesObjs();
    // 在这里可以添加其他逻辑来处理路由变化
    // 例如，更新菜单高亮状态
    // handleRouteChange(newRoute);
  },
  { immediate: true, deep: true }
);
</script>
  
  <style lang="scss" scoped>
.el-menu-demo {
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  background-color: transparent;
  text-color: #000000;
  active-text-color: #000000;

  .site-title {
    color: #000000;
    font-size: 18px;
    margin: 0 auto;
    font-weight: 500;
  }

  .mores {
    position: absolute;
    right: 10px;
  }
}
.site-title-icon {
  position: absolute;
  left: 10px;
  color: #000000;
  font-size: 20px;
}
.el-drawer__body {
  padding: 0 !important;
}
.leftIcon {
  background-color: rgba(150, 152, 155, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  font-size: 14px !important;
  margin-left: 10px;
  border-radius: 50%;
}
.navconH5 {
  .el-menu-demo {
    border: none;
  }
}
</style>
  <style>
.h5el-menu-demo .el-el-drawer__body {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
}
</style>